<template>
	<view class="index-page">
		<hs-status-bar></hs-status-bar>
		<top-bar :title="'AI定制'" :haveBack="false"></top-bar>

		<scroll-view class="scroll-box" :refresher-triggered="triggered" :refresher-threshold="100"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" :refresher-enabled="current==0" scroll-y
			scroll-with-animation @scrolltolower="scrolltolower">
			<view class="material-content">
				<view class="phone-model">
					<text class="title">机型：</text>
					<view class="phone-select">
						<hs-selectPhoneModel style="display: inline-block;position:relative;"
							@selectModel="selectModel"><text class="text1">▼</text></hs-selectPhoneModel>

					</view>
				</view>
				<view class="material-name" @click="materialListShow = !materialListShow">
					<image :src="materialList[activeMaterialIndex].baseImageUrl" mode="aspectFit"></image>
					<image :src="materialList[activeMaterialIndex].frameImageUrl" mode="aspectFit"></image>
					<text>{{materialList[activeMaterialIndex].name}}</text>
					<text class="text1">▼</text>
				</view>
				<view class="material-list" v-if="materialListShow == true">
					<view class="" @click="materialListShow = false"
						style="height: 100vh;width: 100vw;position: absolute;top: 0;left: 0;">

					</view>
					<scroll-view scroll-x="true" class="material-scroll" enable-flex>
						<view class="material-item" v-for="(item,index) of materialList" :key="item.id"
							:class="{active:activeMaterialIndex==index}">
							<radio checked class="radio" v-if="activeMaterialIndex==index" />
							<view class="image" @click="selectMaterial(item,index)">
								<image :src="item.baseImageUrl" mode="aspectFit"></image>
								<image :src="item.frameImageUrl" mode="aspectFit">
							</view>

							</image>
							<view class="title">
								{{item.name}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="tabs">
				<u-tabs :current="current" lineWidth="0" lineHeight="0" :inactiveStyle="inactiveStyle1"
					:activeStyle="activeStyle1" :list="tabsList" @change="switchTab">
				</u-tabs>
			</view>
			<view class="">
				<view class="cases" v-if="exampleList.length>0">
					<view class="cases-item" v-for="item of exampleList" :key="item.id">
						<navigator
							:url="`/pages/example/casesView?phoneModelId=${phoneModelId}&stickerImageId=${item.stickerImageId}&activeMaterial=${activeMaterial}&activeStyleList=${activeStyleList}&type=${listType}`">
							<image :src="item.imageUrl" mode="aspectFit" class="img" lazy-load></image>
							<view class="price">
								￥{{item.price||''}}
							</view>
						</navigator>
					</view>
				</view>
				<view class="hs-p-b-20" v-if="!isEmpty">
					<u-loadmore :status="status" />
				</view>
				<u-empty v-if="isEmpty" mode="data" text="暂无数据" icon="/static/images/icon/data.jpg">
				</u-empty>
			</view>
		</scroll-view>
		<hs-privacyPopup></hs-privacyPopup>
	</view>
</template>

<script>
	import {
		getExampleList,
		getStyleList,
		getMaterialList,
		getSkuList
	} from '@/api/custom.js';
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				tabsList: [
					{
						name: "文字",
						index: 0,
						type: 3
					},{
						name: "人像",
						index: 1,
						type: 1
					},
					{
						name: "全图",
						index: 2,
						type: 2
					},
				],
				pageSize: 20,
				triggered: false,
				isEmpty: false,
				status: "loading",
				materialListShow: false,
				exampleList: [{}, {}, {}, {}, {}, {}],
				styleList: [],
				materialList: [],
				activeStyleList: [],
				activeMaterial: '',
				activeMaterialIndex: 0,
				activeMaterialName: '材质',
				current: 0,
				listType: 3,
				_phoneModelId: '',
				inactiveStyle1: {
					color: '#807D7E',
					fontSize: '38rpx'
				},
				activeStyle1: {
					color: '#3C4242',
					fontSize: '38rpx',
					fontWeight: '700',
				},
			}
		},
		computed: {
			...mapGetters(['phoneModelId'])
		},
		methods: {
			// 获取案例列表
			getExampleList(lastStickerImageId) {
				getExampleList({
					materialMap: {
						10: this.activeMaterial,
						11: this.phoneModelId || uni.getStorageSync('userInfo').phoneModelId
					},
					"type": this.listType,
					styleIds: this.activeStyleList,
					pageSize: this.pageSize,
					lastStickerImageId
				}).then(res => {
					this.exampleList = !lastStickerImageId ? res.data : this.exampleList.concat(res.data)
					if (this.exampleList.length == 0) {
						this.isEmpty = true
						this.status = "nomore";
					} else if (res.data.length < this.pageSize) {
						this.status = "nomore";
						this.isEmpty = false
					} else {
						this.status = "loadmore";
						this.isEmpty = false
					}
					this.triggered = false;
				})
			},
			// 下拉刷新
			onRefresh() {
				if (this.triggered) return
				this.triggered = true;
				setTimeout(() => {
					this.getExampleList()
				}, 500)
			},
			// 复位
			onRestore() {
				this.triggered = false;
			},
			// 滑动到底部
			scrolltolower() {
				if (this.exampleList.length < this.pageSize) return
				this.getExampleList(this.exampleList[this.exampleList.length - 1].stickerImageId)
			},
			// 获取风格列表
			getStyleList() {
				getStyleList({
					type: 2
				}).then(res => {
					this.styleList = res.data
				})
			},
			// 获取机壳列表
			async getMaterialList(phoneModelId) {
				const data = await getSkuList({
					materialMap: {
						11: phoneModelId || this.phoneModelId
					},
					pageSize: 50
				})
				this.$nextTick(() => {
					this.materialList = data.data
					let idx = this.materialList.findIndex(item => {
						return this.activeMaterial == item.materialMap[10]
					})
					idx = idx == -1 ? 0 : idx
					this.selectMaterial(this.materialList[idx], idx)
				})



			},
			// 切换人像和整图
			switchTab(e) {
				this.current = e.index
				this.listType = e.type
				this.onRefresh()
			},
			// 选择手机型号
			selectModel(data) {
				this._phoneModelId = data
				this.getMaterialList(data)
				uni.$u.debounce(() => {
					this.onRefresh()
				})
			},
			// 选择材质
			selectMaterial(data, index) {
				uni.setStorageSync('defaultMaterial', {
					data,
					index
				})
				this.activeMaterial = data.materialMap[10]
				this.activeMaterialIndex = index
				if (this.materialList.length > 0) {
					this.activeMaterialName = this.materialList[index].name
				}
				this.materialListShow = false
				uni.$u.debounce(() => {
					this.onRefresh()
				})
			},
		},
		onLoad() {
			uni.$u.debounce(() => {
				this.getMaterialList()
			})
		},
		onHide() {},
		onShow() {
			if (this._phoneModelId != this.phoneModelId) {
				this.selectModel(this.phoneModelId)
			}
			let defaultMaterial = uni.getStorageSync('defaultMaterial')
			if (defaultMaterial && defaultMaterial.data) {
				this.selectMaterial(defaultMaterial.data, defaultMaterial.index)
				uni.removeStorageSync('defaultMaterial')
			}
		},
		onShareAppMessage() {
			return {
				title: '我发现了一款可以DIY定制手机壳的小程序，快来看看吧',
				path: `/pages/index/index?page=example`,
			}
		},
		// onShareTimeline() {
		// 	return {
		// 		title: '我发现了一款可以DIY定制手机壳的小程序，快来看看吧',
		// 		path: `/pages/index/index?page=example`,
		// 	}
		// }

	}
</script>

<style lang="scss">
	.index-page {
		display: flex;
		flex-direction: column;
		height: 100%;

		.scroll-box {
			flex: 1;
			overflow: hidden;

			.material-content {
				display: flex;
				padding: 10rpx;
				background-color: #fff;
				position: relative;

				.phone-model {
					height: 50rpx;
					line-height: 50rpx;
					font-size: 28rpx;
					margin: 26rpx 35rpx 0;
					position: relative;
					color: #979797;
					flex-shrink: 0;

					.phone-select {
						display: inline-block;
						border-radius: 50rpx;
						border: 2rpx solid #333;
						padding: 0 17rpx;
						font-size: 26rpx;
						height: 50rpx;

						text {
							font-weight: bold;
							color: #333;
						}

						.text1 {
							margin-left: 17rpx;
							font-size: 20rpx;
						}
					}
				}

				.material-name {
					height: 100rpx;
					display: flex;
					flex-grow: 1;

					image {
						height: 100%;
						width: 100rpx;
						position: absolute;
					}

					text {
						font-size: 28rpx;
						margin: auto;
						margin-left: 100rpx;
					}

					.text1 {
						margin-left: 17rpx;
						font-size: 20rpx;
					}
				}

				.material-list {
					height: 300rpx;
					width: 100%;
					background-color: #fff;
					position: absolute;
					bottom: -300rpx;
					left: 0;
					z-index: 999;
					box-shadow: -1rpx 10rpx 17rpx -7rpx #666;

					.material-scroll {
						display: flex;

						.material-item {
							height: 280rpx;
							width: 25vw;
							background-color: #fff;
							border-radius: 17rpx;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							position: relative;
							margin-right: 30rpx;
							text-align: center;
							flex-shrink: 0;

							&.active {
								opacity: 0.7;

								.radio {
									position: absolute;
									right: 17rpx;
									top: 17rpx;
									z-index: 1;
								}
							}

							.image {
								width: 100%;
								height: 280rpx;
								background: #fff;
								position: relative;

								image {
									width: 100%;
									height: 100%;
									position: absolute;
									top: 0;
									left: 0;
								}
							}

							.title {
								font-size: 24rpx;
								margin: 17rpx;
								flex-shrink: 0;
								flex-grow: 0;
								height: 50rpx;
							}

							.item-btn {
								height: 65.8rpx;
								border-radius: 17rpx;
								font-size: 30rpx;
								box-sizing: border-box;
								text-align: center;
								line-height: 62.8rpx;
								background-color: #333;
								color: #fff;
								margin: 17rpx;
							}
						}
					}

				}
			}

			.tabs {
				margin: auto;
				position: relative;
				width: 336rpx;
			}

			.cases {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 14px 23rpx;
				background-color: #fff;

				.cases-item {
					width: 343rpx;
					height: 416.5rpx;
					border-radius: 12px 12px 0px 0px;
					overflow: hidden;

					.img {
						height: 343rpx;
						width: 343rpx;
						background-color: #eee;
					}

					.price {
						font-size: 28rpx;
						text-align: center;
					}
				}
			}

			.style {}
		}
	}
</style>